<script setup>
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Plus,
  Search,
  Edit,
  View,
  Delete,
  RefreshRight,
} from "@element-plus/icons-vue";

import {
  getSuppliersList,
  getSupplierCategories,
  addSupplier,
  updateSupplier,
} from "../../api/suppliers";

import Drawer from "../../components/Drawer.vue";

const loading = ref(false);
const tableData = ref([]);
const total = ref(0);

// 搜索和分页参数
const queryParams = reactive({
  page: 1,
  pageSize: 10,
  keyword: "",
  cate_ids: null,
  status: null,
});

// 动态分类选项
const categoryOptions = ref([]);

// 搜索表单状态
const searchForm = reactive({
  name: "",
  contactPerson: "",
  status: null,
  cate_ids: null,
});

// 供应商的默认表单数据
const defaultFormData = {
  supplier_id: null,
  code: "保存后自动生成",
  name: "",
  contact_person: "",
  contact_phone: "",
  address: "",
  bank_name: "",
  bank_account: "",
  rating_level: null,
  category_ids: [], // 多选
  note: "",
  rating_record: "",
  status: 1,
};
const formData = reactive({ ...defaultFormData });
const formRef = ref(null);

// 表单校验规则
const rules = reactive({
  name: [
    { required: true, message: "供应商名称不能为空", trigger: "blur" },
    {
      min: 4,
      max: 100,
      message: "名称长度在 4 到 100 个字符之间",
      trigger: "blur",
    },
  ],
  contact_person: [
    { required: true, message: "联系人不能为空", trigger: "blur" },
    {
      min: 2,
      max: 50,
      message: "联系人长度在 2 到 50 个字符之间",
      trigger: "blur",
    },
  ],
  contact_phone: [
    { required: true, message: "联系电话不能为空", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
      message: "请输入正确的电话号码",
      trigger: "blur",
    },
  ],
  rating_level: [
    { required: true, message: "请选择供应商评级", trigger: "change" },
  ],
  category_ids: [
    {
      required: true,
      type: "array",
      message: "请选择供应商分类",
      trigger: "change",
    },
  ],
  rating_record: [
    {
      max: 500,
      message: "评级/评价记录长度不能超过 500 个字符",
      trigger: "blur",
    },
  ],
  note: [
    {
      max: 500,
      message: "备注长度不能超过 500 个字符",
      trigger: "blur",
    },
  ],
});

const drawer = reactive({
  visible: false,
  title: "",
  type: "add",
  id: null,
});

// 存储原始数据副本，用于检查表单是否修改
let originalFormData = null;

// 获取分类数据
async function loadCategories() {
  try {
    const res = await getSupplierCategories();
    if (res.code === 0 && res.data) {
      categoryOptions.value = res.data.map((item) => ({
        value: item.id,
        label: item.name,
      }));
    }
  } catch (error) {
    console.error("获取供应商分类失败:", error);
  }
}

// 获取供应商列表
async function loadSupplierList(resetPage = false) {
  if (resetPage) {
    queryParams.page = 1;
  }

  loading.value = true;
  try {
    const params = {
      page: queryParams.page,
      pageSize: queryParams.pageSize,
      keyword: searchForm.name,
      contactPerson: searchForm.contactPerson,
      cate_ids: searchForm.cate_ids,
      status: searchForm.status,
    };

    const res = await getSuppliersList(params);

    if (res.code === 0 && res.data) {
      const rawData = res.data.data || [];

      tableData.value = rawData.map((item) => {
        const cateNamesString = Array.isArray(item.cate_names)
          ? item.cate_names.join(", ")
          : item.cate_names || "";

        return {
          supplier_id: item.supplier_id,
          code: item.supplier_id ? String(item.supplier_id) : "N/A",
          name: item.supplier_name || "",
          contact_phone: item.phone || "",
          category_ids: item.cate_ids || [],
          category_names: cateNamesString,
          note: item.notes || "",
          rating_record: item.rating_record || "",
          contact_person: item.contact_person || "",
          address: item.address || "",
          bank_name: item.bank_name || "",
          bank_account: item.bank_account || "",
          rating_level: item.rating_level || null,
          status: item.status !== undefined ? Number(item.status) : 1,
          created_at: item.created_at || "",
        };
      });

      total.value = res.data.total || 0;
      queryParams.page = res.data.page;
      queryParams.pageSize = res.data.pageSize;
    } else {
      ElMessage.error(res.msg || "获取供应商列表失败");
      tableData.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error("获取供应商列表失败:", error);
    ElMessage.error("获取供应商列表失败，请检查网络服务");
    tableData.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
}

// 搜索/筛选
const handleSearch = () => {
  queryParams.cate_ids = searchForm.cate_ids;
  queryParams.status = searchForm.status;
  loadSupplierList(true);
};

const handleReset = () => {
  // 重置搜索表单
  searchForm.name = "";
  searchForm.contactPerson = "";
  searchForm.status = null;
  searchForm.cate_ids = null;
  handleSearch();
};

// 检查表单数据是否被修改
const checkFormModified = () => {
  if (drawer.type === "add") {
    for (const key in formData) {
      const defaultValue = defaultFormData[key];
      const currentValue = formData[key];

      if (key === "code" || key === "supplier_id") continue;

      if (Array.isArray(currentValue) && Array.isArray(defaultValue)) {
        if (
          JSON.stringify(currentValue.slice().sort()) !==
          JSON.stringify(defaultValue.slice().sort())
        ) {
          return true;
        }
      } else if (String(currentValue || "") !== String(defaultValue || "")) {
        return true;
      }
    }
    return false;
  } else if (drawer.type === "edit" && originalFormData) {
    const keysToCompare = [
      "name",
      "contact_person",
      "contact_phone",
      "address",
      "bank_name",
      "bank_account",
      "rating_level",
      "category_ids",
      "note",
      "rating_record",
      "status",
    ];

    for (const key of keysToCompare) {
      const currentVal = formData[key];
      const originalVal = originalFormData[key];

      if (Array.isArray(currentVal) && Array.isArray(originalVal)) {
        if (
          JSON.stringify(currentVal.slice().sort()) !==
          JSON.stringify(originalVal.slice().sort())
        ) {
          return true;
        }
      } else if (String(currentVal || "") !== String(originalVal || "")) {
        return true;
      }
    }
    return false;
  }
  return false;
};

const openDrawer = (type, row = null) => {
  drawer.type = type;

  originalFormData = null;

  if (type === "add") {
    Object.assign(formData, defaultFormData);
    formData.code = "保存后自动生成";
    formData.status = 1;
  } else if (row) {
    const newFormData = {
      supplier_id: row.supplier_id,
      code: row.code || String(row.supplier_id) || "N/A",
      name: row.name || "",
      contact_phone: row.contact_phone || "",
      contact_person: row.contact_person || "",
      address: row.address || "",
      bank_name: row.bank_name || "",
      bank_account: row.bank_account || "",
      rating_level: row.rating_level || null,
      category_ids: row.category_ids || [],
      note: row.note || "",
      rating_record: row.rating_record || "",
      status: row.status !== undefined ? Number(row.status) : 1,
    };
    Object.assign(formData, newFormData);

    if (type === "edit") {
      originalFormData = JSON.parse(JSON.stringify(newFormData));
    }
  }

  drawer.title =
    type === "add"
      ? "新增供应商"
      : type === "edit"
      ? "编辑供应商"
      : "查看供应商";
  drawer.id = row ? row.supplier_id : null;
  drawer.visible = true;

  nextTick(() => {
    formRef.value?.clearValidate();
  });
};

// 弹窗确认关闭抽屉 (保留退出提示逻辑)
const handleCloseDrawer = (done) => {
  if (drawer.type === "view") {
    done();
    return;
  }

  if (!checkFormModified()) {
    done();
    return;
  }

  ElMessageBox.confirm(
    "当前表单数据尚未保存，确定放弃修改并关闭吗?",
    "放弃修改并关闭",
    {
      confirmButtonText: "确定放弃",
      cancelButtonText: "返回编辑",
      type: "warning",
      closeOnClickModal: false,
    }
  )
    .then(() => {
      done();
    })
    .catch(() => {
      // 返回编辑
    });
};

// 抽屉底部的取消按钮
const handleCancel = () => {
  if (drawer.type === "view") {
    drawer.visible = false;
    return;
  }

  if (!checkFormModified()) {
    drawer.visible = false;
    return;
  }

  ElMessageBox.confirm(
    "当前表单数据尚未保存，确定放弃修改并关闭吗?",
    "放弃修改并关闭",
    {
      confirmButtonText: "确定放弃并关闭",
      cancelButtonText: "返回编辑",
      type: "warning",
      closeOnClickModal: false,
    }
  )
    .then(() => {
      // 取消操作，直接关闭
      drawer.visible = false;
    })
    .catch(() => {
      // 留在抽屉
    });
};

const handleSave = async () => {
  const valid = await formRef.value.validate((isValid, fields) => {
    if (!isValid) {
      console.error("表单校验失败:", fields);
    }
    return isValid;
  });
  if (!valid) {
    ElMessage.error("请检查表单输入是否正确");
    return;
  }

  // 保存确认
  ElMessageBox.confirm(
    `确认要${drawer.type === "add" ? "新增" : "更新"}供应商【${
      formData.name
    }】吗?`,
    "操作确认",
    {
      confirmButtonText: "确定保存",
      cancelButtonText: "取消",
      type: "info",
    }
  )
    .then(async () => {
      await executeSubmit();
    })
    .catch(() => {
      ElMessage.info("已取消保存");
    });
};

// 提交
const executeSubmit = async () => {
  let apiCall;
  let successMsg = "";
  const data = {
    ...(drawer.type === "edit" ? { supplier_id: formData.supplier_id } : {}),
    supplier_name: formData.name,
    phone: formData.contact_phone,
    cate_ids: formData.category_ids,
    notes: formData.note,
    rating_record: formData.rating_record,
    contact_person: formData.contact_person,
    address: formData.address,
    bank_name: formData.bank_name,
    bank_account: formData.bank_account,
    rating_level: formData.rating_level,
    status: Number(formData.status),
  };

  if (drawer.type === "add") {
    apiCall = addSupplier(data);
    successMsg = "新增供应商成功！";
  } else if (drawer.type === "edit") {
    apiCall = updateSupplier(drawer.id, data);
    successMsg = "编辑供应商成功！";
  }
  try {
    const res = await apiCall;
    if (res.code === 0) {
      ElMessage.success(res.msg || successMsg);
      drawer.visible = false;
      Object.assign(formData, defaultFormData);
      loadSupplierList(true);
    } else {
      ElMessage.error(res.msg || "操作失败");
    }
  } catch (error) {
    console.error("提交失败:", error);
    const backendErrorMsg =
      error.response && error.response.data && error.response.data.msg
        ? error.response.data.msg
        : error.message || "提交失败，请检查网络或后端服务";
    ElMessage.error(backendErrorMsg);
  }
};

const handleStatusUpdate = (row) => {
  const currentStatus = Number(row.status);
  let actionTypeInfo, confirmMessage;
  let targetStatus;

  if (currentStatus === 1) {
    targetStatus = 0;
    actionTypeInfo = {
      confirm: "警告",
      type: "warning",
      successMsg: "供应商已成功停用！",
    };
    confirmMessage = `此操作将把供应商【${row.name}】状态变更为**已停用**，是否继续进行停用操作?`;
  } else if (currentStatus === 0) {
    targetStatus = -1;
    actionTypeInfo = {
      confirm: "严重警告",
      type: "error",
      successMsg: "供应商已成功废弃！",
    };
    confirmMessage = `
      此操作将把供应商【${row.name}】状态变更为**已废弃**，是否继续执行废弃操作？
    `;
  } else if (currentStatus === -1) {
    return;
  }

  ElMessageBox.confirm(confirmMessage, `操作确认：${actionTypeInfo.confirm}`, {
    confirmButtonText: `确定${targetStatus === -1 ? "废弃" : "执行"}`,
    cancelButtonText: "取消",
    type: actionTypeInfo.type,
    dangerouslyUseHTMLString: true,
  })
    .then(async () => {
      try {
        const res = await updateSupplier(row.supplier_id, {
          status: targetStatus,
        });

        if (res.code === 0) {
          ElMessage.success(res.msg || actionTypeInfo.successMsg);
          loadSupplierList();
        } else {
          ElMessage.error(res.msg || `${actionTypeInfo.confirm}操作失败`);
        }
      } catch (error) {
        console.error(`${actionTypeInfo.confirm}失败:`, error);
        ElMessage.error(
          `${actionTypeInfo.confirm}操作失败，请检查网络或后端服务`
        );
      }
    })
    .catch(() => {
      ElMessage.info("已取消操作");
    });
};

// 分页事件处理
const handleSizeChange = (val) => {
  queryParams.pageSize = val;
  loadSupplierList(true);
};

const handleCurrentChange = (val) => {
  queryParams.page = val;
  loadSupplierList();
};

onMounted(() => {
  loadCategories();
  loadSupplierList();
});
</script>

<template>
  <div class="supplier-container">
    <el-card class="main-card" shadow="never">
      <div class="card-header">
        <h3>
          <el-icon style="color: black"><Van /></el-icon> 供应商管理
        </h3>
        <el-button type="primary" :icon="Plus" @click="openDrawer('add')">
          新增供应商
        </el-button>
      </div>

      <el-form :inline="true" :model="searchForm" class="filter-form-inline">
        <el-row :gutter="24">
          <el-col :span="5">
            <el-form-item label="供应商名称" class="supplier-name-item">
              <el-input
                v-model="searchForm.name"
                placeholder="请输入供应商名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="联系人">
              <el-input
                v-model="searchForm.contactPerson"
                placeholder="请输入联系人"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="供应商分类">
              <el-select
                v-model="searchForm.cate_ids"
                placeholder="全部"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in categoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="合作状态">
              <el-select
                v-model="searchForm.status"
                placeholder="全部"
                clearable
                style="width: 100%"
              >
                <el-option label="正常合作" :value="1" />
                <el-option label="暂停合作" :value="0" />
                <el-option label="已废弃" :value="-1" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="5" class="action-buttons-col">
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch"
                >搜索</el-button
              >
              <el-button @click="handleReset" :icon="RefreshRight"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20"> </el-row>
      </el-form>

      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        header-cell-class-name="table-header-cell"
        row-class-name="custom-table-row"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column
          prop="name"
          label="供应商名称"
          min-width="150"
          align="center"
        />
        <el-table-column
          prop="contact_person"
          label="联系人"
          width="80"
          align="center"
        />
        <el-table-column
          prop="contact_phone"
          label="联系电话"
          width="140"
          align="center"
        />
        <el-table-column
          prop="category_names"
          label="供货分类"
          min-width="150"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="rating_level"
          label="供应商评级"
          width="100"
          align="center"
        >
          <template #default="scope">
            <el-tag
              :type="
                scope.row.rating_level === 'A'
                  ? 'success'
                  : scope.row.rating_level === 'B'
                  ? 'warning'
                  : scope.row.rating_level === 'D'
                  ? 'danger'
                  : 'info'
              "
            >
              {{ scope.row.rating_level }} 级
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="合作状态"
          width="100"
          align="center"
        >
          <template #default="scope">
            <el-tag
              :type="
                scope.row.status === 1
                  ? 'success'
                  : scope.row.status === 0 // 状态 0 停用
                  ? 'warning'
                  : 'danger' // 状态 -1 废弃
              "
            >
              {{
                scope.row.status === 1
                  ? "合作中"
                  : scope.row.status === -1
                  ? "已废弃"
                  : "已停用"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="建档日期"
          width="120"
          align="center"
        >
          <template #default="scope">
            {{
              scope.row.created_at
                ? scope.row.created_at.substring(0, 10)
                : "N/A"
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right" align="center">
          <template #default="scope">
            <el-button
              link
              type="primary"
              :icon="Edit"
              size="default"
              @click="openDrawer('edit', scope.row)"
              :disabled="false"
              >编辑</el-button
            >

            <el-button
              link
              type="info"
              :icon="View"
              size="default"
              @click="openDrawer('view', scope.row)"
              >查看</el-button
            >

            <el-button
              link
              type="danger"
              :icon="Delete"
              size="default"
              @click="handleStatusUpdate(scope.row)"
              :disabled="scope.row.status === -1"
            >
              {{ scope.row.status === 1 ? "停用" : "删除" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container pagination-split">
        <span class="pagination-info">
          共 {{ total }} 条记录，第 {{ queryParams.page }}/{{
            Math.ceil(total / queryParams.pageSize)
          }}
          页
        </span>
        <el-pagination
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :small="false"
          :disabled="loading"
          :background="true"
          layout=" prev, pager, next, sizes,jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <Drawer
      v-model="drawer.visible"
      :title="drawer.title"
      :type="drawer.type"
      :size="700"
      @save="handleSave"
      @cancel="handleCancel"
      @close-request="handleCloseDrawer"
    >
      <template #default>
        <el-form
          :model="formData"
          :rules="rules"
          ref="formRef"
          label-width="110px"
          label-position="right"
          :disabled="drawer.type === 'view'"
          :class="{ 'in-view-mode': drawer.type === 'view' }"
        >
          <h4 class="form-section-title section-padding-bottom">基本信息</h4>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="供应商编号" prop="code">
                <el-input
                  v-model="formData.code"
                  placeholder="供应商编号"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商名称" prop="name" required>
                <el-input
                  v-model="formData.name"
                  placeholder="请输入供应商名称"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系人" prop="contact_person" required>
                <el-input
                  v-model="formData.contact_person"
                  placeholder="请输入联系人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="contact_phone" required>
                <el-input
                  v-model="formData.contact_phone"
                  placeholder="请输入联系电话"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="供应商分类" prop="category_ids" required>
                <el-checkbox-group v-model="formData.category_ids">
                  <el-checkbox
                    v-for="item in categoryOptions"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="供应商评级" prop="rating_level" required>
                <el-select
                  v-model="formData.rating_level"
                  placeholder="请选择评级"
                  style="width: 100%"
                >
                  <el-option label="A级" value="A" />
                  <el-option label="B级" value="B" />
                  <el-option label="C级" value="C" />
                  <el-option label="D级" value="D" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合作状态" prop="status">
                <el-select
                  v-model="formData.status"
                  placeholder="请选择状态"
                  style="width: 100%"
                  :disabled="drawer.type === 'add'"
                >
                  <el-option label="正常合作" :value="1" />
                  <el-option label="暂停合作" :value="0" />
                  <el-option label="已废弃" :value="-1" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="评级/评价记录" prop="rating_record">
                <el-input
                  v-model="formData.rating_record"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入评级或评价记录"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <h4 class="form-section-title section-padding-bottom">供应商详情</h4>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开户银行" prop="bank_name">
                <el-input
                  v-model="formData.bank_name"
                  placeholder="请输入开户银行"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号" prop="bank_account">
                <el-input
                  v-model="formData.bank_account"
                  placeholder="请输入银行账号"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="详细地址" prop="address">
                <el-input
                  v-model="formData.address"
                  placeholder="请输入详细地址"
                  type="textarea"
                  :rows="1"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <h4 class="form-section-title section-padding-bottom">其他</h4>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="note">
                <el-input
                  v-model="formData.note"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入备注信息"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>

      <template #footer>
        <div style="flex: auto">
          <el-button @click="handleCancel">取消</el-button>
          <el-button
            v-if="drawer.type !== 'view'"
            type="primary"
            @click="handleSave"
            >保存</el-button
          >
        </div>
      </template>
    </Drawer>
  </div>
</template>

<style scoped lang="less">
.supplier-container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.main-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 18px;
  box-sizing: border-box;
  overflow: hidden;

  :deep(.el-card__body) {
    padding: 0px 15px 15px 15px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid rgb(217, 217, 217);

  h3 {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: rgb(38, 38, 38);

    .el-icon {
      margin-right: 8px;
      font-size: 18px;
      color: rgb(27, 130, 241);
    }
  }
}

.filter-form-inline {
  .supplier-name-item :deep(.el-form-item__label) {
    width: 90px;
  }

  :deep(.el-row:last-child .el-col) {
    margin-bottom: 0;
  }

  .el-form-item {
    margin-right: 0;
    width: 100%;
  }

  .action-buttons-col {
    display: flex;
    align-items: flex-start;
    padding-bottom: 0;

    .el-form-item {
      margin-bottom: 0;
    }

    .el-button {
      margin-left: 10px;

      &:first-child {
        margin-left: 0;
      }
    }
  }
}

:deep(.el-table) {
  .el-table__row {
    .cell {
      line-height: 25px;
    }
  }

  .el-table__header-wrapper th {
    height: 50px;
    color: black;
    background: rgba(247, 247, 247, 0.9);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid rgb(235, 238, 245);
  }

  .el-table__row:hover > td {
    background-color: rgba(247, 247, 247, 0.9);
  }
}

.pagination-split {
  margin-top: 18px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .pagination-info {
    color: rgb(89, 89, 89);
    font-size: 14px;
    line-height: 28px;
  }

  :deep(.el-pagination) {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    .el-pagination__total {
      display: none;
    }

    .el-pagination__sizes,
    .el-pagination__jump {
      display: inline-flex;
      align-items: center;
      margin-left: 10px;
      .el-input__inner {
        height: 30px;
        line-height: 30px;
        min-width: 30px;
        border-radius: 6px;
      }
    }

    .btn-prev,
    .btn-next,
    .el-pager li {
      background: white;
      border: 1px solid rgb(217, 217, 217);
      border-radius: 6px;
      color: rgb(38, 38, 38);
      min-width: 30px;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      margin-right: 1px;
    }

    .el-pager li.is-active {
      background: rgb(27, 130, 241);
      border-color: rgb(27, 130, 241);
      color: white;
    }
  }
}

:deep(.el-drawer__body) {
  padding: 0 25px 20px 25px;
}

.form-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgb(217, 217, 217);
}

.section-padding-bottom {
  margin-bottom: 20px;
}

:deep(
    .el-checkbox-group
      .el-checkbox__input.is-disabled.is-checked
      .el-checkbox__inner
  ) {
  border-color: rgb(27, 130, 241);
}

:deep(
    .el-checkbox-group
      .el-checkbox__input.is-disabled.is-checked
      + .el-checkbox__label
  ) {
  color: rgb(27, 130, 241);
}
</style>
